<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* canvas{
      background-color: black;
    } */
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

</body>
</html>
<script>
  /** @type {HTMLCanvasElement} */
  var canvas=document.querySelector("#canvas")
  var ctx=canvas.getContext("2d")
  canvas.width=window.innerWidth
  canvas.height=window.innerHeight
  //烟花粒子
  function Ball(x,y,radius,vx,vy,color){
    this.x=x
    this.y=y
    this.vx=vx
    this.vy=vy
    this.radius=radius
    this.color=color
    this.draw=function(){
      ctx.beginPath()
      ctx.save()
      ctx.fillStyle=this.color
      ctx.arc(this.x,this.y,this.radius,0,Math.PI*2)
      ctx.fill()
      ctx.closePath()
      ctx.restore()
      this.upadte()
    }
    this.upadte=function(){
      this.x+=this.vx
      this.y+=this.vy
      if((this.x==0)||this.y>canvas.width||this.y<0){
        this.x=canvas.width/2
        this.y=canvas.height
        // this.radius=Math.random()*2+1
        // this.vx=(Math.random()-0.5)
        // this.vy=(Math.random()-0.5)*5
      }
    }
  }
  var balls=[]
  // function ball(){
    // balls=[]
  for(var i=0;i<200;i++){
    // if(i<150){
    var x=canvas.width/2
    var y=canvas.height
    // var y=Math.floor(Math.random() * canvas.width-1)
    // }
    // else{
    // var x=
    // var y=Math.random()*100-100
    // }
    var radius=Math.random()*2+1
    var vx=(Math.random()-0.5)
    // var vx=0
    var vy=(Math.random()-0.5)*5
    let r=Math.floor(Math.random() * 256)
    let g=Math.floor(Math.random() * 256)
    let b=Math.floor(Math.random() * 256)
    let rgb="rgb("+r+","+g+","+b+")"
    // if(vx<0.2||vy<0.2){
    //   vx=0.5
    // }
    balls.push(new Ball(x,y,radius,vx,vy,rgb))
  }
// }
// ball()
function qou(){
  // ctx.clearRect(0,0,canvas.width,canvas.height)
  for(var j=0;j<balls.length;j++){
      balls[j].draw()
    }
    ctx.beginPath()
      ctx.save()
      ctx.fillStyle="rgba(0,0,0,.1)"
      ctx.fillRect(0,0,canvas.width,canvas.height)
      ctx.closePath()
      ctx.restore()
    requestAnimationFrame(qou)
}
qou()
</script>